<!DOCTYPE html>
<html>
  <head>
    <title>Document.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  <style type="text/css">
        body,div{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
            font-size: 18px;
            font-weight: bold;
        }
        #tab {
            margin: 10px auto;
            width: 900px;
            border: 2px solid #f00;
        }
        #tab .row {
            height: 40px;
            line-height: 40px; 
            text-align: center;
        }
        #tab .row .cm {
            width: 100px;
            height: 40px;
            float: left;
        }
        .c1{
            background-color: #9ff;
        }
        .c3{
            background-color: #f99;
        }
    </style>
</head>
<body>
    <div id="tab">
        <div class="row">
            <div class="cm"></div>
        </div>
    </div>
    <script type="text/javascript">
        var oTab = document.getElementById('tab');
        var str="";
        for(var i= 1;i<=9;i++){
            //创建行
            var num=i%2;
            switch(num){
                case 0:
                    str+='<div class="row c1">';
                    break;
                case 1:
                    str+='<div class="row c3">';
                    
            }
            for(j=1;j<=i;j++){
                str+='<div class="cm">';
                str+=j + "*" + i + "=" + (j *i);
                str+="</div>";
            }
            str+='</div>';
        }
        oTab.innerHTML=str;
   </script>
</body>
</html>
